<template>
  <div class="product-list">
    <h2 class="category-title">电子产品</h2>
    <ul class="product-items">
      <li v-for="item in eleProducts" :key="item.name" class="product-item">
        {{ item.name }} - ¥{{ item.price }}
      </li>
    </ul>

    <h2 class="category-title">食品</h2>
    <ul class="product-items">
      <li v-for="item in food" :key="item.name" class="product-item">
        {{ item.name }} - ¥{{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script setup>
const eleProducts = [
  { name: '手机', price: 3999 },
  { name: '耳机', price: 599 }
]

const food = [
  { name: '面包', price: 10 },
  { name: '牛奶', price: 8 }
]
</script>

<style scoped>
.product-list {
  font-family: Arial, sans-serif;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.category-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.product-items {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 30px;
}

.product-item {
  margin-bottom: 10px;
  font-size: 16px;
  color: #666;
}
</style>